<template>
    <div class="subfieldsr">
      <span class="ops"><a href="" target="_blank">更多>></a></span>
      <span class="opss"><a href="" target="_blank">更多>></a></span>
      <el-tabs class="eltabs" v-model="activeName" ref="a" @tab-click="handleClick" >
              <el-tab-pane label="学术进展"  name="first">
                  <ul>
                      <li>
                          <a href="">Volatile compounds, bacteria compositions and physicochemical properties of 10 fresh fermented rice noodles from southern China</a>
                      </li>
                      <li>
                          
                          <a href="">Species Diversity and Chemotypes of Fusarium Species Associated with Maize Stalk Rot in Yunnan Province of Southwest China</a>
                      </li>
                  </ul>
              </el-tab-pane>
        </el-tabs>
        <el-tabs class="eltabsa" v-model="activeName" ref="a" @tab-click="handleClick" >
            <el-tab-pane label="表格下载"  name="first">
                <ul>
                    <li>
                        <a href="">新闻信息发布审</a>
                    </li>
                    <li>
                        <a href="">用远印章申请表</a>
                    </li>
                    <li>
                        <a href="">院内签保</a>
                    </li>
                    <li>
                        <a href="">新媒体账号开设</a>
                    </li>
                    <li style="margin:0px">
                        <a href="">网站与信息系统</a>
                    </li>
                </ul>
            </el-tab-pane>
      </el-tabs>
        <div class="sub_right">
          <el-tabs class="eltabss"  v-model="activeNames" ref="a" @tab-click="handleClick" >
              <el-tab-pane label="科研成果"  name="first" >
                <ol class="ollist">
                    <li class="s01">
                        <a href="" target="_blank">
                            <span>获奖</span>
                        </a>
                    </li>
                    <li class="s02">
                        <a href="" target="_blank">
                            <span>论文</span>
                        </a>
                    </li>
                    <li class="s03">
                        <a href="" target="_blank">
                            <span>著作</span>
                        </a>
                    </li>
                    <li class="s04">
                        <a href="" target="_blank">
                            <span>专利</span>
                        </a>
                    </li>
                    <li class="s05">
                        <a href="" target="_blank">
                            <span>新技术/新设备</span>
                        </a>
                    </li>
                </ol>
              </el-tab-pane> 
                     
        </el-tabs>
       
        </div>
    </div>
    </template>
    <script>
      export default {
        data() {
          return {
            activeName: 'first',
            activeNames: 'first'
          };
        },
        methods: {
          handleClick(tab, event) {
            console.log(tab, event);
          },
          handleClicks(tab, event) {
            console.log(tab, event);
          },
        },
      //   mounted(){
      //     this.$nextTick(()=>{this.$refs.a.$refs.nav.$nextTick(()=>{
      //         var target=document.getElementsByClassName("el-tabs_item is-top");
      //         console.log(target);
      //         let that=this;
      //         for(let i=0;i<target.length;i++){
      //             target[i].addEventListener("mouseover",()=>{
      //                 that.$refs.a.handleTabClick(1,String(i))
      //             })
      //         }
      //     })})
      //   }
      };
    </script>
    <style scoped>
    .ollist .s01{
        width: 28.33%;
        margin-top: 18px;
        overflow: hidden;
        float: left;
        margin-right: 30px;
        text-align: center;
    }
    .ollist .s02{
        width: 28.33%;
        margin-top: 18px;
        overflow: hidden;
        float: left;
        margin-right: 30px;
        text-align: center;
    }
    .ollist .s03{
        width: 28.33%;
        margin-top: 18px;
        overflow: hidden;
        float: left;
        text-align: center;
    }
    .ollist .s04{
        width: 28.33%;
        margin-top: 22px;
        overflow: hidden;
        float: left;
        margin-right: 30px;
        text-align: center;
    }
    .ollist .s05{
        width: 64%;
        margin-top: 22px;
        overflow: hidden;
        float: left;
        text-align: center;
    }
    .ollist li a span{
        color: #fff;
    }
    .ollist li a{
        list-style: none;
        text-decoration: none;
    }
    .ollist .s01 span{
        background: url(../image/icon_1.png)  #48c2a3 no-repeat center 26px;
        display: block;
        height: 38px;
        line-height: 34px;
        padding-top: 64px;
    }
    .ollist .s02 span{
        background: url(../image/icon_2.png)  #8dc153 no-repeat center 26px;
        display: block;
        height: 38px;
        line-height: 34px;
        padding-top: 64px;
    }
    .ollist .s03 span{
        background: url(../image/icon_3.png)  rgb(249, 146, 56) no-repeat center 26px;
        display: block;
        height: 38px;
        line-height: 34px;
        padding-top: 64px;
    }
    .ollist .s04 span{
        background: url(../image/icon_4.png)  rgb(234, 195, 47) no-repeat center 26px;
        display: block;
        height: 38px;
        line-height: 34px;
        padding-top: 64px;
    }
    .ollist .s05 span{
        background: url(../image/icon_5.png)  rgb(16, 174, 221) no-repeat center 26px;
        display: block;
        height: 38px;
        line-height: 34px;
        padding-top: 64px;
    }
    .eltabs li{
      list-style: none;
      float: left;
      width: 100%;
      height: 65px;
      line-height: 36px;
      overflow: hidden;
      background: url(../image/sanjiao.png) no-repeat left 13px;
    }
    .eltabsa li{
        list-style: none;
        float: left;
        width: 20%;
        height: 38px;
        line-height: 36px;
        overflow: hidden;
        background: url(../image/sanjiao.png) no-repeat left 13px;
      }


      .eltabs li a{
          color: #000;
          list-style: none;
          text-decoration: none;
          display: block;
          line-height: 28px;
          padding-left: 16px;
      }
      .eltabsa li a{
        color: #000;
        list-style: none;
        text-decoration: none;
        display: block;
        padding-left: 18px;
    }
    .subfieldsr .ops{
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 999;
    }
    .subfieldsr .opss{
      position: absolute;
      right: 0px;
      bottom:88px;
      z-index: 999;
    }
    .subfieldsr .ops a{
      color: #000;
      list-style: none;
      text-decoration: none;
    }
    .subfieldsr .opss a{
      color: #000;
      list-style: none;
      text-decoration: none;
    }
    .eltabss ul{
      list-style: none;
    }
   
   /deep/ .el-tabs__item {
      font-weight: bold; /*设置标签文本加粗*/
      font-size: 20px;
    }
    /deep/ .el-tabs__item:hover {
      font-weight: bold; /*设置标签文本加粗*/
      font-size: 20px;
       color: #000;
    }
    /deep/.el-tabs__item.is-active{
        color: #000;
    }
    /deep/.el-tabs__active-bar{
      background:#069564 ;
    }
    .subfieldsr{
      position: relative;
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
    }
    .eltabs{
      width: 62%;
      height: 150px;
      float: right;
    }
    .eltabsa{
        width: 62%;
        height: 50px;
        float: right;
        position: absolute;
        bottom: 70px;
        right: 0px;
    }
    .sub_right{
      width: 415px;
      float: left;
      height: 313px;
    }
  </style>